<template>
    <div class="goods-main">
        <div class="menu-wrapper" ref="menuScroll">
        <ul class="goods-scroll">
            <li v-for="(good,index) in goods" class="good-item" :class="{'current':index===MenuActiveIndex}" @click="changeFoodPosition(index,$event)">
                <div class="good-item-content"><v-purchase v-if="good.type>=0" :size="4" :icon="classMap[good.type]" class="icon"></v-purchase>{{good.name}}</div>
            </li>
        </ul>
        </div>
        <div class="good-wrapper" ref="foodScroll">
            <ul class="good-list">
                <li v-for="good in goods" class="good-list-item" ref="foodList">
                    <h2 class="good-title">{{good.name}}</h2>
                    <ul class="food-list">
                        <li class="food-list-item border-1px-bottom" v-for="food in good.foods" @click="gotoDetail(food)">
                            <img :src="food.icon"  :alt="good.name" class="food-img"/>
                            <div class="food-detail">
                                <h2 class="food-name">{{food.name}}</h2>
                                <p class="food-desc" v-if="food.description !=''">{{food.description}}</p>
                                <p class="count-detail"><span class="count-num">月售{{food.sellCount}}份</span><span class="count-present">好评率{{food.rating}}%</span></p>
                                <p class="price"><span class="new">￥{{food.price}}</span><span class="old" v-if="food.oldPrice !=''">￥{{food.oldPrice}}</span></p>
                            </div>
                            <div class="control-area">
                                <v-carcontrol :food="food" @add="addFood"></v-carcontrol>
                            </div>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        <v-shopcar :foodList="BuyFoodList" :deliveryPrice="seller.deliveryPrice" :minPrice="seller.minPrice" ref="shopcar"></v-shopcar>
        <v-food ref="food" :detailFood="selectedFood" @add="addFood"></v-food>
    </div>
</template>

<script type="es6">
    import purchase from '../purchase/purchase'
    import shopcar from '../shopcar/shopcar'
    import carcontrol from '../carcontrol/carcontrol'
    import food from '../food/food'
    import BScroll from 'better-scroll'
    export default{
        name:"goods",
        props:{
            seller:{
                type:Object,
                default () {
                    return {}
                }
            }
        },
        data(){
            return {
                goods:[],
                heightList:[],
                foodScrollY:0,
                isClickMenu:false,
                selectedFood:{}

            }
        },
        created () {
            this.$http.get("api/goods").then((response)=>{
                response = response.body
                this.goods = response.goods
                this.$nextTick(() => {
                    this._initScroll();
                    this._cacluateLength();
                });
            })
            this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee']

        },
        methods:{
          _initScroll() {
              this.menuScroll = new BScroll(this.$refs.menuScroll,{
                  click:true
              })
              this.foodScroll = new BScroll(this.$refs.foodScroll,{
                  click:true,
                  probeType: 3
              })
              this.foodScroll.on('scroll',(pos) => {
                      this.foodScrollY = Math.abs(Math.round(pos.y))
              })
          },
            _cacluateLength(){
                let foodList = this.$refs.foodList
                let baseLength = 0
                this.heightList.push(baseLength)
                foodList.forEach((food,key) => {
                    baseLength += food.clientHeight
                    this.heightList.push(baseLength)
                })
            },
            changeFoodPosition(index,event){
                //这里判断是自定义事件，还是浏览器事件，若是浏览器事件直接返回
                if(event._constructed){
                    let foodList = this.$refs.foodList
                    let currentFoodList = foodList[index]
                    //betterScroll的内部方法，可以滚动到指定元素位置
                    this.foodScroll.scrollToElement(currentFoodList,500)
                }
            },
            addFood (target){
                this._drop(target)
            },
            _drop (target){
                //异步处理动画，使动画变得流畅
                this.$nextTick(()=>{
                    this.$refs.shopcar.drop(target)
                })
            },
            gotoDetail (food) {
                this.selectedFood = food
                this.$refs.food.show()
            }
        },
        computed:{
            MenuActiveIndex(){
                for(let i=0;i<this.heightList.length-1;i++){
                    if(this.foodScrollY>=this.heightList[i] && this.foodScrollY<this.heightList[i+1]){
                        return i
                    }
                }
                return 0
            },
            BuyFoodList(){
                var Buyfood = []
                this.goods.forEach(function(good){
                    good.foods.forEach(function(food){
                        if(food.count>0){
                            Buyfood.push(food)
                        }
                    })
                })
                return Buyfood
            }
        },
        components:{
            "v-purchase":purchase,
            "v-shopcar":shopcar,
            "v-carcontrol":carcontrol,
            "v-food":food

        }
    }
</script>

<style lang="less" rel="stylesheet/less" scoped>
    @import '../../../public/stylesheet/mixin.less';

    .goods-main{
        display: flex;
        position: absolute;
        top: 174px;
        bottom: 46px;
        width: 100%;
        overflow: hidden;

        .menu-wrapper{
            flex:0 0 80px;
            width:80px;
            .good-item{
                display: table;
                height: 54px;
                width: 56px;
                padding: 0 12px;
                line-height: 14px;
                &.current{
                    background:#fff;
                    position:relative;
                    margin-top:-1px;
                    z-index:10;
                    .good-item-content{
                        .border-none();
                        font-weight:700;

                    }
                }
                &:last-child{
                    .good-item-content{
                        .border-none();
                    }
                }
                .good-item-content{
                    display:table-cell;
                    height:100%;
                    vertical-align:middle;
                    font-size:12px;
                    line-height:16px;
                    color:#07111b;
                    .border-1px-bottom(rgba(7,17,27,0.1));
                    .icon{
                        margin-right:4px;
                    }

                }
            }
        }
            .good-wrapper{
                flex:1;
                .good-list-item{

                    .good-title{
                        padding-left:14px;
                        font-size:12px;
                        line-height:26px;
                        color:rgb(147,153,159);
                        background:#f3f5f7;
                        border-left:2px solid #d9dde1;
                    }
                    .food-list{
                        padding:0 8px 0 18px;
                        .food-list-item{
                            display:flex;
                            position:relative;
                            padding-bottom:12px;
                            padding-top:12px;
                            &:not(:last-child){
                                .border-1px-bottom(rgba(7,17,27,0.1));
                            }
                            .food-img{
                                flex:0 0 57px;
                                width:57px;
                                height:57px;
                                margin-right:6px;
                            }
                            .food-detail{
                                flex:0 0 130px;
                                width:130px;
                                .food-name{
                                    font-size:14px;
                                    line-height:18px;
                                }
                                .food-desc{
                                    font-size:12px;
                                    line-height:1.5em;
                                    margin:2px 0 4px;
                                    color:rgb(147,153,159);
                                }
                                .count-detail{
                                    font-size:12px;
                                    color:rgb(147,153,159);
                                    margin-top:4px;
                                    margin-bottom:4px;
                                    .count-num{
                                        margin-right:4px;
                                    }
                                }
                                .price{
                                    .new{
                                        font-size:16px;
                                        line-height:18px;
                                        margin-right:4px;
                                        color:#f00;
                                        font-weight:700;
                                        vertical-align:top;
                                    }
                                    .old{
                                        vertical-align:top;
                                        font-size:12px;
                                        color:rgb(147,153,159);
                                        text-decoration:line-through;
                                    }
                                }
                            }
                            .control-area{
                                position:absolute;
                                top:6px;
                                right:-2px;
                            }
                        }
                    }
                }

            }



    }
</style>